<template>
	<view class="popup" v-if="visible">
		<!-- <view class="popup-overlay" @click="handleCancel"></view> -->
		<view class="popup-content">
			<view class="popup-header">
				<text>选择人数</text>
			</view>
			<view class="container"><img src="../../static/delete.png" class="responsive-img" @click="handleCancel"></view>
			<view class="popup-body">
				<view @click="dwon" class="dwon">-</view>
				<text class="num">{{num}}</text>
				<view @click="add" class="add">+</view>
			</view>
			<view class="popup-footer">
				<!-- <button @click="handleCancel">取消</button> -->
				<button @click="handleConfirm" class="btn">确认购买</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		}
	});

	const emit = defineEmits(['confirm', 'cancel']);

	const num = ref(1)
	const add = () => {
		num.value = num.value + 1
	}
	const dwon = () => {
		if (num.value <= 1) {
			return
		} else {
			num.value = num.value - 1
		}
	}

	const handleConfirm = () => {
		emit('confirm',num);
		console.log(num.value,"我购买");
	};

	const handleCancel = () => {
		emit('cancel');
		console.log(num.value);
	};
</script>

<style scoped>
	.container {  
	  width: 25px; /* 设置外层盒子的宽度为20px */  
	  height: 25px;
	  overflow: hidden; /* 防止图片溢出 */  
	  position: absolute;
	  top:8px;
	  right: 10px;
	}  
	  
	.responsive-img {  
	  width: 100%; /* 图片宽度设置为100%，即父容器的宽度 */  
	  height: 100%; /* 高度自动调整以保持图片的宽高比 */  
	} 
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
	}

	.popup-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.popup-content {
		background: white;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		width: 80%;
		max-width: 400px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.popup-header {
		font-size: 18px;
		margin-bottom: 10px;
		letter-spacing: 2px;
		font-weight: bold;
	}

	.popup-body {
		margin-bottom: 20px;
		height: 50px;
	}

	.popup-footer {
		display: flex;
		width: 320px;
		height: 35px;
		
	}
	.btn{
		width: 100%;
		height: 100%;
		background-color: #1E90FF;
		line-height: 35px;
		border-radius: 50px;
	}


	.num {
		font-weight: bold;
		display: inline-block;
		margin-top: 5px;
		font-size: 16px
	}

	.add{
		display: inline-block;
		font-size: 23px;
		font-weight: bold;
		padding: 5px;
		padding-left: 10px;
	}
	.dwon {
		display: inline-block;
		font-size: 23px;
		font-weight: bold;
		padding: 5px;
		padding-right: 10px;
	}
</style>
